<template>
  <div class="main">
    <govheader title="化工产业大脑 · 安全总览"></govheader>
    <govnavigation></govnavigation>
    <el-row
      class="content"
      :gutter="10"
      style="padding-left: 15px; padding-right: 5px; padding-bottom: 7px"
      v-if="zfNameflag"
    >
      <el-col :span="8" class="content-left">
        <el-col class="box1">
          <div class="title">
            <p>园区风险评估</p>
          </div>

          <div class="content-body">
            <div style="width: 100%; height: 174px; background: transparent">
              <div
                style="
                  width: 50%;
                  position: relative;
                  height: 174px;
                  float: left;
                "
              >
                <div
                  v-show="echarts2ShowFlag"
                  id="annular2"
                  style="width: 100%; height: 174px; float: left; z-index: 100"
                ></div>
                <div
                  v-show="!echarts2ShowFlag"
                  style="
                    width: 100%;
                    height: 174px;
                    color: #909399;
                    font-size: 14px;
                    text-align: center;
                    line-height: 170px;
                  "
                >
                  暂无数据
                </div>
                <!-- <div class="legend">
                  <div
                    class="legendColor"
                    :style="{ 'background-color': legendColor2 }"
                  ></div>
                  <div>{{ legendValue2 }}</div>
                </div> -->
                <!-- <div class="aperture1" v-show="echarts2ShowFlag"></div> -->
              </div>
              <div
                style="  width: 50%; float: left
                height: 174px;
                background: transparent;
                border-radius: 10px;
                position: relative;"
              >
                <div class="enterprise-body">
                  <div
                    class="enterprise-content"
                    v-for="(item, index) in option2Data"
                    :key="index"
                  >
                    <div
                      class="enterprise-color"
                      :style="{ background: item.itemStyle.color }"
                    ></div>
                    <div class="enterprise-type">{{ item.name }}</div>
                    <div class="enterprise-count">{{ item.pre }}</div>
                  </div>
                </div>
              </div>
            </div>
            <el-table
              ref="table1"
              :data="tableData1"
              style="width: 100%; margin-top: 10px"
              height="278px"
              :cell-style="{ padding: '6px 0px', height: '36px' }"
              :header-cell-style="{
                backgroundColor: '#CADFFF',
                color: '#4A6899',
                padding: '6px 0px',
              }"
              :cell-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="排名"
                width="60"
                align="center"
              ></el-table-column>
              <el-table-column
                property="parkName"
                align="center"
                :show-overflow-tooltip="true"
                label="园区名称"
              ></el-table-column>
              <el-table-column property="score" align="center" label="安全评分">
                <template slot-scope="scope">
                  <span     style="
                font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        "
                    >{{ scope.row.score }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                property="assessmentLevel"
                align="center"
                label="安全等级"
              ></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col class="box" style="margin-bottom: 0px">
          <div class="title">
            <p>重点监管的危险化工工艺</p>
          </div>
          <div class="content-body">
            <div style="position: relative; width: 50%">
              <div
                v-show="echarts3ShowFlag"
                id="annular3"
                style="width: 100%; height: 200px; float: left; z-index: 100"
              ></div>
              <div
                v-show="!echarts3ShowFlag"
                style="
                  width: 100%;
                  height: 200px;
                  color: #909399;
                  font-size: 14px;
                  text-align: center;
                  line-height: 255px;
                "
              >
                暂无数据
              </div>
              <!-- <div class="legend">
                <div
                  class="legendColor"
                  :style="{ 'background-color': legendColor3 }"
                ></div>
                <div>{{ legendValue3 }}</div>
              </div> -->
              <!-- <div class="aperture aperture2" v-show="echarts3ShowFlag"></div> -->
            </div>
            <div style="width: 50%; float: left">
              <div class="craft-body">
                <div class="craft-title">
                  <span class="title-content">重点监管的危险化工工艺</span>
                </div>
                <div class="craft-value active">
                  {{
                    keySupervisionTechnologyAndEntCount.keySupervisionTechnologyCount
                  }}
                </div>
              </div>
              <div class="craft-body">
                <div class="craft-title">
                  <span class="title-content">涉及企业数</span>
                </div>
                <div class="craft-value active">
                  {{
                    keySupervisionTechnologyAndEntCount.keySupervisionTechnologyEntCount
                  }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="8" class="content-center">
        <div style="position: relative">
          <div id="annular1" style="width: 100%; height: 514px"></div>
          <div class="legend-body">
            <div
              class="legend-content"
              @click="changeMap('重点监管危险化工工艺')"
            >
              <div class="legend-point" style="background: #f63f5e"></div>
              <div class="legend-title" style="color: rgba(0, 228, 255, 1)">
                重点监管危险化工工艺数
              </div>
              <div class="legend-value" style="color: #f63f5e">
                {{ inProvinceTotal.technologyCount }}
              </div>
            </div>
            <div class="legend-content" @click="changeMap('重点监管危化品')">
              <div class="legend-point" style="background: #ff8c2f"></div>
              <div class="legend-title" style="color: rgba(0, 228, 255, 1)">
                重点监管危化品数
              </div>
              <div class="legend-value" style="color: #ff8c2f">
                {{ inProvinceTotal.chemicalCount }}
              </div>
            </div>
            <div class="legend-content" @click="changeMap('重大危险源')">
              <div class="legend-point" style="background: #5f83ff"></div>
              <div class="legend-title" style="color: rgba(0, 228, 255, 1)">
                重大危险源数
              </div>
              <div class="legend-value" style="color: #5f83ff">
                {{ inProvinceTotal.dangerSourceCount }}
              </div>
            </div>
            <div class="legend-content" @click="changeMap('今日安全作业数')">
              <div class="legend-point" style="background: #65d77b"></div>
              <div class="legend-title" style="color: rgba(0, 228, 255, 1)">
                今日安全作业数
              </div>
              <div class="legend-value" style="color: #65d77b">
                {{ inProvinceTotal.jobCount }}
              </div>
            </div>
          </div>
        </div>
        <div class="box" style="margin-top: 7px; margin-bottom: 0px">
          <div class="title">
            <p>重点监管危化品</p>
          </div>
          <div class="content-body">
            <div class="chemicals-body">
              <div class="title-content">重点监管危化品种类</div>
              <div class="chemicals-value active">
                {{
                  keySupervisionChemicalsType.keySupervisionChemicalsTypeCount
                }}
              </div>
            </div>
            <div class="chemicals-body" style="margin-left: 15px">
              <div class="title-content">园区危化品种类</div>
              <div class="chemicals-value active">
                {{
                  keySupervisionChemicalsType.keySupervisionChemicalsTypeParkCount
                }}
              </div>
            </div>
            <el-table
              ref="table2"
              :data="tableData2"
              style="width: 100%; margin-top: 10px"
              height="149px"
              :cell-style="{ padding: '6px 0px', height: '36px' }"
              :header-cell-style="{
                backgroundColor: '#CADFFF',
                color: '#4A6899',
                padding: '6px 0px',
              }"
              :cell-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="排名"
                width="60"
                align="center"
              ></el-table-column>
              <el-table-column
                property="parkName"
                :show-overflow-tooltip="true"
                label="园区名称"
              ></el-table-column>
              <el-table-column
                property="chemicalTypeCount"
                align="center"
                label="涉及重点监管危化品种类"
              >
                <template slot-scope="scope">
                  <span
                              style="
                font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        "
                    >{{ scope.row.chemicalTypeCount }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                property="entCount"
                align="center"
                label="涉及重点监管危化品企业"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative">
              <div class="title">
                <p>区域危化生产风险指数排名</p>
              </div>
              <div class="content-body">
                <el-table
                  ref="table3"
                  :data="tableData3"
                  style="width: 100%"
                  height="202px"
                  :cell-style="{ padding: '6px 0px', height: '36px' }"
                  :header-cell-style="{
                    backgroundColor: '#CADFFF',
                    color: '#4A6899',
                    padding: '6px 0px',
                  }"
                  :cell-class-name="tableRowClassName"
                >
                  <el-table-column
                    type="index"
                    label="排名"
                    width="60"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    property="areaName"
                    label="区域名称"
                  ></el-table-column>
                  <el-table-column
                    property="riskIndex"
                    align="center"
                    label="危化生产风险指数"
                  >
                    <template slot-scope="scope">
                      <span
                           style="
                font-weight: 600;
                        background: -webkit-linear-gradient(90deg,#ffca12,#ffffff);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        "
                        >{{ scope.row.riskIndex }}</span
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="position: relative">
              <div class="title">
                <p>企业风险评估分布</p>
              </div>
              <div class="content-body" style="position: relative">
                <div style="position: relative; width: 50%; float: left">
                  <div
                    v-show="echarts4ShowFlag"
                    id="annular4"
                    style="width: 100%; height: 202px; z-index: 100"
                  ></div>
                  <div
                    v-show="!echarts4ShowFlag"
                    style="
                      width: 100%;
                      height: 202px;
                      color: #909399;
                      font-size: 14px;
                      text-align: center;
                      line-height: 180px;
                    "
                  >
                    暂无数据
                  </div>
                  <div class="legend">
                    <div
                      class="legendColor"
                      :style="{ 'background-color': legendColor4 }"
                    ></div>
                    <div>{{ legendValue4 }}</div>
                  </div>
                  <div class="aperture" v-show="echarts4ShowFlag"></div>
                </div>
                <div style="position: relative; width: 50%; float: left">
                  <div class="enterprise-body">
                    <div
                      class="enterprise-content"
                      v-for="(item, index) in option4Data"
                      :key="index"
                    >
                      <div
                        class="enterprise-color"
                        :style="{ background: item.itemStyle.color }"
                      ></div>
                      <div class="enterprise-type">{{ item.name }}</div>
                      <div class="enterprise-count">{{ item.pre }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box" style="margin-bottom: 0px">
              <div class="title">
                <p>重大危险源</p>
              </div>
              <div class="content-body-top">
                <div style="overflow: hidden; float: left; width: 75%">
                  <div class="source-part source-right">
                    <div class="source-title">重大危险源数量</div>
                    <div class="source-value active">
                      {{ dangerSourceCount.dangerSourceCount }}
                    </div>
                  </div>
                  <div class="source-part source-right">
                    <div class="source-title">园区重大危险源数量</div>
                    <div class="source-value active">
                      {{ dangerSourceCount.dangerSourceParkCount }}
                    </div>
                  </div>
                  <div
                    v-show="echarts5ShowFlag"
                    id="annular5"
                    style="
                      width: 100%;
                      height: 152px;
                      float: left;
                      z-index: 100;
                    "
                  ></div>
                  <div
                    v-show="!echarts5ShowFlag"
                    style="
                      width: 100%;
                      height: 152px;
                      color: #909399;
                      font-size: 14px;
                      text-align: center;
                      line-height: 198px;
                      float: left;
                    "
                  >
                    暂无数据
                  </div>
                </div>

                <div class="source-body" style="float: right">
                  <div class="source-part">
                    <div class="source-value">
                      <span class="active">{{
                        dangerSourceCount.dangerSourceEntCount
                      }}</span>
                    </div>
                    <div class="source-title">涉及重大危险源企业数量</div>
                  </div>
                  <div class="source-part">
                    <div class="source-value">
                      <span class="active">{{
                        dangerSourceCount.dangerSourceOtCount
                      }}</span>
                    </div>
                    <div class="source-title">涉及一二级重大危险源企业数量</div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      selectLegend: '重点监管危险化工工艺',
      zfNameflag: true,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      center: {
        杭州市: [119.539823, 29.870667],
        宁波市: [121.580925, 29.676002],
        温州市: [120.455764, 27.880064],
        嘉兴市: [120.802189, 30.652582],
        湖州市: [119.873415, 30.780146],
        绍兴市: [120.580041, 29.767623],
        金华市: [119.999656, 29.105538],
        衢州市: [118.705947, 28.875889],
        舟山市: [122.233931, 30.231275],
        台州市: [121.117506, 28.682316],
        丽水市: [119.579372, 28.183492]
      },
      option1Data: [],
      option1Scatter1Data: [],
      option1Scatter2Data: [],
      option1Scatter3Data: [],
      option1Scatter4Data: [],
      option2XData: [],
      option2Data: [],
      option3XData: [],
      option3Data: [],
      option3TaxData: [],
      option3AddData: [],
      option4Data: [],
      option5Data: [],
      keySupervisionTechnologyAndEntCount: {
        keySupervisionTechnologyCount: 0,
        keySupervisionTechnologyEntCount: 0
      },
      inProvinceTotal: {
        chemicalCount: 0,
        dangerSourceCount: 0,
        jobCount: 0,
        technologyCount: 0
      },
      keySupervisionChemicalsType: {
        keySupervisionChemicalsTypeCount: 0,
        keySupervisionChemicalsTypeParkCount: 0
      },
      dangerSourceCount: {
        dangerSourceCount: 0,
        dangerSourceEntCount: 0,
        dangerSourceOtCount: 0,
        dangerSourceParkCount: 0
      },
      echarts2ShowFlag: true,
      echarts3ShowFlag: true,
      echarts4ShowFlag: true,
      echarts5ShowFlag: true,
      table1Interval: null,
      table2Interval: null,
      table3Interval: null,
      echarts1Interval: null,
      echarts2Interval: null,
      echarts3Interval: null,
      echarts4Interval: null,
      legendColor3: '',
      legendValue3: '',
      legendColor4: '',

      legendValue4: '',
      legendColor5: '',
      legendValue5: '',
      legendColor7: '',
      legendValue7: '',
      legendColor2: '',
      legendValue2: '',
      legendColor1: '',
      legendValue1: '',
      legendColor: '',
      legendValue: '',
      angle2: 0,
      colorList: [
        'rgba(38,153,161,.8)',
        'rgba(222,128,66,.8)',
        'rgba(222,179,92,.8)',
        'rgba(167,219,245,.8)',
        'rgba(28,85,165,.9)'
      ],
      colorList1: [
        'rgb(109,104,255)',
        'rgb(0,239,254)',
        'rgb(68,215,182)',
        'rgb(255,166,0)',
        'rgb(152,123,255)',
        'rgb(118,190,204)'
      ],
      colorList2: [
        'rgb(4,32,245)',
        'rgb(0,96,255)',
        'rgb(109,212,0)',
        'rgb(254,219,101)',
        'rgb(163,10,235)',
        'rgb(0,135,146)'
      ]
    }
  },

  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  // 调用
  mounted () {
    this.getData()
  },
  beforeDestroy () {
    clearInterval(this.table1Interval)
    clearInterval(this.table2Interval)
    clearInterval(this.table3Interval)
    clearInterval(this.echarts1Interval)
    clearInterval(this.echarts2Interval)
    clearInterval(this.echarts3Interval)
    clearInterval(this.echarts4Interval)
    // clearInterval(this.timer2)
    clearInterval(this.timer3)
    clearInterval(this.timer4)
  },
  methods: {
    getData () {
      let today = new Date()
      let month = today.getMonth() + 1
      month = month < 10 ? '0' + month : '' + month
      let day = today.getDate()
      day = day < 10 ? '0' + day : '' + day
      let searchDate = today.getFullYear() + '-' + month + '-' + day

      this.$http
        .post(`/home/government/govParkRiskAssessment/getSafetyOverview`, {
          searchDate: searchDate
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.keySupervisionTechnologyAndEntCount =
              res.data.keySupervisionTechnology.keySupervisionTechnologyAndEntCount
            this.inProvinceTotal = res.data.cityCountInfo.inProvinceTotal
            this.keySupervisionChemicalsType =
              res.data.keySupervisionChemical.keySupervisionChemicalsType
            this.dangerSourceCount = res.data.dangerSource.dangerSourceCount

            this.tableData1 = res.data.parkRiskAssessment.parkSafetyLevelSort

            this.tableData2 =
              res.data.keySupervisionChemical.keySupervisionChemicalsTypeDistribution
            this.tableData3 = res.data.riskIndexRank

            this.option1Data = res.data.cityCountInfo.cityCountInfo.map(
              (item) => {
                return {
                  name: item.cityName,
                  workmanship: item.technologyCount,
                  goods: item.chemicalCount,
                  source: item.dangerSourceCount,
                  task: item.jobCount
                }
              }
            )
            this.option1Scatter1Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.workmanship)
            })
            this.option1Scatter2Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.goods)
            })
            this.option1Scatter3Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.source)
            })
            this.option1Scatter4Data = this.option1Data.map((item) => {
              return this.center[item.name].concat(item.task)
            })

            for (let i in res.data.parkRiskAssessment
              .parkSafetyLevelDistribution) {
              this.option2Data.push({
                name: String(i),
                value: Number(
                  res.data.parkRiskAssessment.parkSafetyLevelDistribution[i] * 1
                )

              })
            }
            // this.option2Data=[{name:'A级',value:40},{name:"B级",value:40},{name:'C级',value:40},{name:'D级',value:30}]
            var list = []
            let sum = -1
            this.option2Data.map((i, index) => {
              sum++
              if (sum === this.colorList1.length) {
                sum = 0
              }
              i.itemStyle = {
                color: this.colorList1[sum],
                color1: this.colorList2[sum]
              }
              list.push(i.value)
            })
            this.option2Data.map((i, index) => {
              i.pre = this.countPercentage(list)[index]
            })
            // eslint-disable-next-line no-redeclare
            var list = []
            var num = -1
            this.option3Data =
              res.data.keySupervisionTechnology.keySupervisionTechnologyDistribution.map(
                (item, index) => {
                  list.push(item.technologyCount)

                  num++
                  if (num === this.colorList1.length) {
                    num = 0
                  }
                  return {
                    name: item.technologyTypeName,
                    value: item.technologyCount,
                    itemStyle: {
                      color: this.colorList1[num],
                      color1: this.colorList2[num]
                    }
                  }
                }
              )
            this.option3Data.map((i, index) => {
              i.pre = this.countPercentage(list)[index]
            })
            // eslint-disable-next-line no-redeclare
            var list = []
            this.option4Data = res.data.safetyLevelDistribution.map((item) => {
              list.push(item.entCount)
              return {
                name: item.evaluationResults,
                value: item.entCount * 10
              }
            })
            this.option4Data.map((i, index) => {
              i.pre = this.countPercentage(list)[index]
              i.itemStyle = {
                color: this.colorList2[index]
              }
            })

            this.option5XData =
              res.data.dangerSource.dangerSourceDistribution.map((item) => {
                return item.dangerSourceLevelName
              })
            this.option5Data =
              res.data.dangerSource.dangerSourceDistribution.map((item) => {
                return item.dangerSourceCount
              })

            this.echarts2ShowFlag = this.option2Data.length > 0
            this.echarts3ShowFlag = this.option3Data.length > 0
            this.echarts4ShowFlag = this.option4Data.length > 0
            this.echarts5ShowFlag = this.option5XData.length > 0
            if (this.option1Data && this.option1Scatter1Data) {
              this.renderMyChart1()
            }
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()

            if (this.option5Data && this.option5XData) {
              this.renderMyChart5()
            }
            this.getright_table('table1')
            this.getright_table('table2')
            this.getright_table('table3')
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    changeMap (legend) {
      if (legend !== this.selectLegend) {
        this.selectLegend = legend
        this.option1.series[1].name = legend
        if (legend === '重点监管危险化工工艺') {
          this.option1.series[1].itemStyle.color = '#F63F5E'
          this.option1.series[1].data = this.option1Scatter1Data
        } else if (legend === '重点监管危化品') {
          this.option1.series[1].itemStyle.color = '#FF8C2F'
          this.option1.series[1].data = this.option1Scatter2Data
        } else if (legend === '重大危险源') {
          this.option1.series[1].itemStyle.color = '#5F83FF'
          this.option1.series[1].data = this.option1Scatter3Data
        } else if (legend === '今日安全作业数') {
          this.option1.series[1].itemStyle.color = '#65D77B'
          this.option1.series[1].data = this.option1Scatter4Data
        }
        this.myChart1.setOption(this.option1)
      }
    },
    // 浙江省地图
    renderMyChart1 () {
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('../zhejiang.json')

      echarts.registerMap('js', uploadedDataURL)
      this.option1 = {
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },

          formatter: function (para) {
            if (para.seriesType === 'map') {
              if (para.data) {
                let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; "></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`
                str +=
                  ' <div  style="padding: 10px;"><div style="color:#EEBF43;text-align: center;font-weight: 600"; >' +
                  para.name +
                  '</div>' +
                  '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;   display: inline-block; width: 120px;">&nbsp;重点监管危险化工工艺数:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.workmanship +
                  '</span></div>' +
                  '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px; display: inline-block; width: 120px;">&nbsp;重点监管危化品数:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.goods +
                  ' </span></div>' +
                  '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px;display: inline-block; width: 120px;">&nbsp;重大危险源数:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.source +
                  '</span></div>' +
                  '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;     font-size: 12px;display: inline-block; width: 120px;">&nbsp;今日安全作业数:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.task +
                  ' </span></div></div></div>'
                return str
              } else {
                let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; "></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`
                str +=
                  ' <div  style="padding: 10px;"><div style="color:#EEBF43;text-align: center;font-weight: 600"; >' +
                  para.name +
                  '</div>' +
                  '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;   display: inline-block; width: 120px;">&nbsp;重点监管危险化工工艺:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  0 +
                  '</span></div>' +
                  '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px; display: inline-block; width: 120px;">&nbsp;重点监管危化品:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  0 +
                  ' </span></div>' +
                  '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px;display: inline-block; width: 120px;">&nbsp;重大危险源:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  0 +
                  ' </span></div>' +
                  '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;     font-size: 12px;display: inline-block; width: 120px;">&nbsp;今日安全作业数:</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  0 +
                  ' </span></div></div></div>'

                return str
              }
            } else {
              // return para.seriesName + ' : ' + para.data[2];
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; "></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`

              str +=
                '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;   display: inline-block; width: 120px;">&nbsp;' +
                para.seriesName +
                ':</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                para.data[2] +
                '</span></div>'
              return str
            }
          }
        },
        geo: [
          {
            map: 'js',
            roam: false, // 是否允许缩放
            zoom: 0.9, // 默认显示级别
            layoutSize: '100%',
            layoutCenter: ['45%', '50%'],
            itemStyle: {
              areaColor: '#113D8D',
              borderColor: 'rgb(27, 172, 255)',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                show: true,
                color: '#ffffff'
              }
            },
            label: {
              show: true,
              color: '#ffffff'
            },
            zlevel: 3
          }
        ],
        series: [
          {
            type: 'map',
            geoIndex: 0,
            data: this.option1Data
          },
          {
            name: '重点监管危险化工工艺',
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#F63F5E'
            },
            label: {
              normal: {
                show: true,
                color: '#fff',
                position: 'inside',
                fontSize: 10,
                formatter: function (para) {
                  return para.data[2]
                }
              }
            },
            symbol: 'circle',
            symbolOffset: [0, 20],
            symbolSize: 25,
            data: this.option1Scatter1Data,
            zlevel: 10
          }
        ]
      }
      this.myChart1.setOption(this.option1)
      this.autoPlay(this.myChart1, this.option1, 'echarts1Interval')
    },
    renderMyChart2 () {
      let _this = this

      if (_this.option2Data.length > 0) {
        this.myChart2 = echarts.init(document.getElementById('annular2'))
        let angle = this.angle2 // 角度，用来做简单的动画效果的
        var outerRidus1 = 0.8
        var outerRidus2 = 0.85
        var data = []
        var data1 = []
        var seriesOption = [// 最外层圆
          {
            type: 'pie',
            radius: ['65%', '45%'],
            center: ['50%', '50%'],
            // hoverAnimation: false,
            data: [],
            label: {
              show: false,
              position: 'outside',
              formatter: '{d}%',
              color: '#FFFFFF'
            },
            labelLine: {
              normal: {
                length: 80,
                lineStyle: {
                  width: 1
                }
              }
            }
          },
          // 内圆 + 中间文字
          {
            type: 'pie',
            radius: ['50%', '30%'],
            center: ['50%', '50%'],
            // hoverAnimation: false,
            // z: 10,
            label: {
              show: false,
              position: 'center',
              formatter: () => {
                return '佣金总额\r\n{total|100} 个'
              },
              rich: {
                total: {
                  fontSize: 24,
                  color: '#FFFFFF'
                }
              },
              color: '#FFFFFF',
              fontSize: 16,
              lineHeight: 30
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
        for (let i = 0; i < _this.option2Data.length; i++) {
          data.push(
            {
              value: _this.option2Data[i].value,
              name: _this.option2Data[i].name,
              itemStyle: {
                normal: {
                  color: {
                  // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: _this.option2Data[i].itemStyle.color1 // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: _this.option2Data[i].itemStyle.color // 100% 处的颜色
                      }
                    ]
                  }
                }
              }
            }
          )
          data1.push({
            value: _this.option2Data[i].value,
            name: _this.option2Data[i].name,
            itemStyle: {
              normal: {
                color: {
                // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.option2Data[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.option2Data[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                },
                opacity: 0.5
              }
            }
          }
          )
        // seriesOption.push(json)
        }
        seriesOption[0].data = data
        seriesOption[1].data = data1
        this.option2 = {
          title: {
            text: '',
            top: 0,
            left: 0,
            textStyle: {
              width: '100%',
              color: '#52CCFF',
              fontSize: 14,
              fontWeight: 600
            }
          },
          tooltip: {
            trigger: 'item',
            confine: true,
            padding: [0, 5],
            backgroundColor: 'rgba(0,0,0,.5)',
            extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
            formatter: function (params) {
              let percent = 0
              let total = 0
              for (let i = 0; i < _this.option2Data.length; i++) {
                total += _this.option2Data[i].value
              }
              percent = Number(((params.value / total) * 100).toFixed(0))
              if (params.name !== '') {
                return params.name + ' : ' + params.value + '个,占比 : ' + percent + '%'
              } else {
                return ''
              }
            }
          },
          series: seriesOption
        }
        // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
        // eslint-disable-next-line no-inner-declarations
        function getCirlPoint (x0, y0, r, angle) {
          let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
          let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
          return {
            x: x1,
            y: y1
          }
        }
        this.myChart2.setOption(this.option2, true)
        this.autoPlay(this.myChart2, this.option2, 'echarts2Interval')
        // this.option2 = this.getPie3D1(
        //   _this.option2Data,
        //   0.8,
        //   '丨 园区安全等级分布',
        //   30,
        //   250
        // )
        // this.myChart2.setOption(_this.option2)

        // this.bindListen(_this.myChart2, _this.option2, '2', 'timer2')
      }
    },
    renderMyChart3 () {
      let _this = this
      if (_this.option3Data.length > 0) {
        this.myChart3 = echarts.init(document.getElementById('annular3'))
        let angle = 0 // 角度，用来做简单的动画效果的
        var outerRidus1 = 0.8
        var outerRidus2 = 0.85
        var data = []
        var data1 = []
        var seriesOption = [// 最外层圆
          {
            type: 'pie',
            radius: ['65%', '45%'],
            center: ['50%', '50%'],
            // hoverAnimation: false,
            data: [],
            label: {
              show: false,
              position: 'outside',
              formatter: '{d}%',
              color: '#FFFFFF'
            },
            labelLine: {
              normal: {
                length: 80,
                lineStyle: {
                  width: 1
                }
              }
            }
          },
          // 内圆 + 中间文字
          {
            type: 'pie',
            radius: ['50%', '30%'],
            center: ['50%', '50%'],
            // hoverAnimation: false,
            // z: 10,
            label: {
              show: false,
              position: 'center',
              formatter: () => {
                return '佣金总额\r\n{total|100} 个'
              },
              rich: {
                total: {
                  fontSize: 24,
                  color: '#FFFFFF'
                }
              },
              color: '#FFFFFF',
              fontSize: 16,
              lineHeight: 30
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
        for (let i = 0; i < _this.option3Data.length; i++) {
          data.push(
            {
              value: _this.option3Data[i].value,
              name: _this.option3Data[i].name,
              itemStyle: {
                normal: {
                  color: {
                  // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: _this.option3Data[i].itemStyle.color1 // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: _this.option3Data[i].itemStyle.color // 100% 处的颜色
                      }
                    ]
                  }
                }
              }
            }
          )
          data1.push({
            value: _this.option3Data[i].value,
            name: _this.option3Data[i].name,
            itemStyle: {
              normal: {
                color: {
                // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.option3Data[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.option3Data[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                },
                opacity: 0.5
              }
            }
          }
          )
        // seriesOption.push(json)
        }
        seriesOption[0].data = data
        seriesOption[1].data = data1
        // this.option3 = {
        //   color: _this.colorList2,
        //   tooltip: {
        //     trigger: 'item',
        //     confine: true
        //   },
        //   series: [
        //     {
        //       type: 'pie',
        //       radius: ['40%', '60%'],
        //       center: ['50%', '50%'],
        //       data: this.option3Data,
        //       emphasis: {
        //         itemStyle: {
        //           shadowBlur: 10,
        //           shadowOffsetX: 0,
        //           shadowColor: 'rgba(0, 0, 0, 0.5)'
        //         }
        //       },
        //       label: {
        //         show: false,
        //         position: 'center',
        //         formatter: '{d}%',
        //         fontSize: '12'
        //       }
        //     }
        //   ]
        // }

        this.option3 = {
          title: {
            text: '',
            top: 0,
            left: 0,
            textStyle: {
              width: '100%',
              color: '#52CCFF',
              fontSize: 14,
              fontWeight: 600
            }
          },
          tooltip: {
            trigger: 'item',
            confine: true,
            padding: [0, 5],
            backgroundColor: 'rgba(0,0,0,.5)',
            extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
            formatter: function (params) {
              let percent = 0
              let total = 0
              for (let i = 0; i < _this.option3Data.length; i++) {
                total += _this.option3Data[i].value
              }
              percent = Number(((params.value / total) * 100).toFixed(0))
              if (params.name !== '') {
                return params.name + '数 : ' + params.value + '个,占比 : ' + percent + '%'
              } else {
                return ''
              }
            }
          },
          series: seriesOption
        }

        // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
        // eslint-disable-next-line no-inner-declarations
        function getCirlPoint (x0, y0, r, angle) {
          let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
          let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
          return {
            x: x1,
            y: y1
          }
        }

        this.myChart3.setOption(this.option3)
        this.autoPlay(this.myChart3, this.option3, 'echarts3Interval')
        // this.option3 = this.getPie3D(_this.option3Data, 0.8, '', 30, 300)
        // this.myChart3.setOption(_this.option3)
        // this.bindListen(_this.myChart3, _this.option3, '3', 'timer3')
      }
    },
    renderMyChart4 () {
      let _this = this
      var arr = _this.option4Data

      if (arr.length > 0) {
        this.myChart4 = echarts.init(document.getElementById('annular4'))
        this.option4 = this.getPie3D1(arr, 0, '', 30, 350)
        this.myChart4.setOption(_this.option4)
        this.bindListen(_this.myChart4, _this.option4, '4', 'timer4')
      }
    },
    renderMyChart5 () {
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      this.option5 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '0%',
          right: '0%',
          bottom: '2%',
          top: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            data: this.option5XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '企业数量',
          splitLine: {
            lineStyle: {
              color: '#8DAFDD'
            }
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: 'rgba(2, 198, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(2, 198, 255, 0)'
                }
              ])
            },
            data: this.option5Data
          }
        ]
      }
      this.myChart5.setOption(this.option5)
    },
    getright_table (tableRef) {
      var isScroll = true

      // 拿到表格挂载后的真实DOM
      const table = this.$refs[tableRef]
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper
      this.addEvent(divData, 'mouseenter', function () {
        isScroll = false
      })
      this.addEvent(divData, 'mouseleave', function () {
        isScroll = true
      })
      this[tableRef + 'Interval'] = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0
          }
        }
      }, 100)
    },
    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    // 饼状图自动播放
    autoPlay (myChart, option, timer) {
      var that = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        flag = false
        clearInterval(that[timer])
        // 取消之前高亮图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })

        charPiecurrentIndex = param.dataIndex
        //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })

        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: param.dataIndex
        })
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      that[timer] = setInterval(chartHover, 3000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          that[timer] = setInterval(chartHover, 3000)
          flag = true
        }
      })
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    getPie3D (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: '10px',
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },
    getPie3D1 (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: '10px',
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value / 10}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },

    // 获取3d丙图的最高扇区的高度
    getHeight3D (series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },
    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },
    fomatFloat (num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      // 判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    },
    bindListen (myChart, option, num, timer) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      let that = this
      let flag = true
      // let selectedIndex = '';
      let hoveredIndex = ''
      let seriesIndex = 0
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', function (params) {
        clearInterval(that[timer])
        flag = false
        seriesIndex = params.seriesIndex
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = option.series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = option.series[hoveredIndex].pieData.startRatio
            endRatio = option.series[hoveredIndex].pieData.endRatio
            k = option.series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                option.series[hoveredIndex].pieData.value
              )
            option.series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          isSelected = option.series[seriesIndex].pieStatus.selected
          isHovered = true
          startRatio = option.series[seriesIndex].pieData.startRatio
          endRatio = option.series[seriesIndex].pieData.endRatio
          k = option.series[seriesIndex].pieStatus.k
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[seriesIndex].pieData.value + 5
            )
          option.series[seriesIndex].pieStatus.hovered = isHovered
          that['legendColor' + num] =
            option.series[seriesIndex].itemStyle.color
          that['legendValue' + num] =
            option.series[seriesIndex].name +
            ' : ' +
            (
              (option.series[seriesIndex].pieData.endRatio -
                option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            '%'
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex
          myChart.setOption(option)
        }
      })
      var chartHover = function () {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === option.series.length) {
          seriesIndex = 0
        }
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected
          isHovered = false
          startRatio = option.series[hoveredIndex].pieData.startRatio
          endRatio = option.series[hoveredIndex].pieData.endRatio
          k = option.series[hoveredIndex].pieStatus.k
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[hoveredIndex].pieData.value
            )
          option.series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = option.series[seriesIndex].pieStatus.selected
        isHovered = true
        startRatio = option.series[seriesIndex].pieData.startRatio
        endRatio = option.series[seriesIndex].pieData.endRatio
        k = option.series[seriesIndex].pieStatus.k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            option.series[seriesIndex].pieData.value + 5
          )
        option.series[seriesIndex].pieStatus.hovered = isHovered
        that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
        that['legendValue' + num] =
          option.series[seriesIndex].name +
          ' : ' +
          (
            (option.series[seriesIndex].pieData.endRatio -
              option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          '%'
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex
        // 使用更新后的 option，渲染图表
        myChart.setOption(option)
        seriesIndex++
      }
      // 修正取消高亮失败的 bug
      myChart.on('globalout', function () {
        if (!flag) {
          that[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
      that[timer] = setInterval(chartHover, 5000)
    },
    countPercentage (countArray) {
      let j = 0
      countArray.forEach((i) => {
        j += i
      })
      var resultArray = []
      for (var i = 0; i < countArray.length; i++) {
        var k = ((countArray[i] / j) * 100).toFixed(2) + '%'
        resultArray.push(k)
      }
      return resultArray
    }

  }
}
</script>
<style lang="scss" scoped>
.main {
  min-width: 1519.2px;
  background: #041565;
  background-size: 100% 100%;
}
.box {
  padding: 10px;
  margin-bottom: 10px;
  background-image: url("../../../../assets/img/industry/框尺寸1.png");
  background-size: 100% 100%;
  overflow: hidden;
}
.box1 {
  padding: 10px;
  margin-bottom: 10px;
  background-image: url("../../../../assets/img/industry/bingkuang.png");
  background-size: 100% 100%;
  overflow: hidden;
}
.title {
  width: 300px;
  background-image: url("../../../../assets/img/industry/小标题背景1.png");
  background-size: 100% 100%;
  font-size: 14px;
  margin-left: 15px;
  font-weight: 700;
  color: #ffffff;
  p {
    padding-left: 26px;
    font-size: 12px;
  }
}
.content {
  width: 100%;
  padding: 10px;
}
.content-body {
  // padding: 5px;
  padding: 5px 20px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
}
.content-body-top {
  padding: 5px;
  overflow: hidden;
  .source-part {
    background: url("../../../../assets/img/industry/数据背景框2.png");
    background-size: 100% 100%;
    border-radius: 8px;
    margin-bottom: 7px;
    float: left;
    margin: 6px 5px;
    padding: 5px 14px;
  }
  .source-right {
    margin: 5px 20px;
    font-size: 12px;
  }
  .source-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 1);

    text-align: center;
  }
  .source-value {
    font-size: 18px;
    font-weight: 600;
    color: #00a3ff;
    text-align: center;
  }
}
.craft-body {
  background: rgba(2, 43, 126, 1);
  width: 220px;
  height: 36px;
  line-height: 36px;
  margin: 43px 10px;
  color: #ffffff;
  .craft-title {
    float: left;
  }
  .craft-value {
    color: #00a3ff;
    font-size: 16px;
    font-weight: 600;

    float: right;
    margin-right: 10px;
  }
}
.chemicals-body {
  background: url("../../../../assets/img/industry/数据背景框2.png");
  background-size: 100% 100%;
  border-radius: 6px;
  padding: 5px 15px;
  margin: 0px 35px;
  .chemicals-value {
    color: #00a3ff;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: center;
  }
  .title-content {
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    width: 100%;

    text-align: center;

    // line-height: 18px;
  }
}
.title-blue {
  width: 4px;
  height: 15px;
  background-color: #00a3ff;
  float: left;
}
.title-content {
  margin-left: 5px;
  color: #ffffff;
  font-size: 13px;
}

.source-body {
  float: right;
  width: 25%;
  height: 190px;
  .source-part {
    width: 100%;
    border-radius: 8px;
    background: transparent;
  }
  .source-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 1);
    width: 100%;
  }
  .source-value {
    font-size: 18px;
    font-weight: 600;
    color: #00a3ff;
    background: url("../../../../assets/img/industry/数据展示框3.png");
    background-size: 100% 100%;
    width: 100%;
    height: 50px;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 42%;
  height: 80px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4b5463;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/deep/ .table-row1 {
  background-color: #082560 !important;
}
/deep/ .table-row2 {
  background-color: #051e79 !important;
}

.content-body /deep/ .el-table tr {
  th {
    border: none;
  }
  td {
    border: none;
  }
}
.content-body /deep/ .el-table tr {
  color: #bbdaff;
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    th {
      background: #022b7e !important;
      color: #00e4ff !important;
    }
  }
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
.active {
  color: #ffffff !important;
  background-image: -webkit-linear-gradient(
    #fff,
    #f0c41b,
    #fff,
    #f0c41b
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.legend {
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #a1e2ff;
  text-align: center;
  overflow: hidden;
  > div {
    float: left;
  }
}
.legendColor {
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2) {
  width: 170px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;
}
.aperture {
  position: absolute;
  top: 38%;
  left: 50%;
  margin-left: -33%;
  width: 66%;
  height: 82px;
  background-image: url("../../../../assets/img/industry/echartsBg1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.aperture1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  background-image: url("../../../../assets/img/industry/echartsBg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.aperture2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  background-image: url("../../../../assets/img/industry/echartsBg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.enterprise-body {
  float: left;
  width: 80%;
  height: 185px;
  padding: 25px 5px;
  color: #ffffff;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  // border-bottom: 1px solid #B2D4F0;
  // border-style: dashed;
  padding: 0px 5px;
}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  // color: #ffffff;
  line-height: 30px;
  float: left;
  margin-left: 12px;
}
.enterprise-count {
  font-size: 14px;
  line-height: 30px;
  float: right;
}
</style>
